<template>
  <a-modal v-model:visible="modalVisible" @ok="handleOk" @cancel="handleCancel">
    <template #title> 现场认证 </template>
    <div>
      <a-form :model="form" auto-label-width>
        <a-form-item field="roleName" label="验厂成员：">
          <a-select v-model="form.userId" allow-search>
            <a-option
              v-for="item in Personne"
              :key="item.id"
              :value="item.id"
              >{{ item.name }}</a-option
            >
          </a-select>
        </a-form-item>
        <a-form-item field="roleName" label="职责：">
          <a-input
            placeholder="请输入职责内容"
            v-model="form.responsibility"
            allow-clear
          ></a-input>
        </a-form-item>
        <a-form-item field="roleCode" label="描述：">
          <a-input
            placeholder="系统自动生成"
            v-model="form.description"
            allow-clear
          ></a-input>
        </a-form-item>
      </a-form>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { reactive, computed, ref, watch } from 'vue';
  import { GetPersonnelinformation } from '@/api/home/System settings/personal-information/index';

  const props = withDefaults(
    defineProps<{
      visible: boolean;
    }>(),
    {
      visible: false,
    }
  );

  const emit = defineEmits(['update:visible', 'addCocMemder']);

  // 判断用户是否显示弹出框
  const modalVisible = computed({
    get() {
      return props.visible;
    },
    set(visible: boolean) {
      emit('update:visible', visible);
    },
  });

  const form = ref({
    userId: '',
    responsibility: '',
    description: '',
  });

  const rules = reactive({});

  const Personne = ref();
  const Personnelinformation = async () => {
    const res = await GetPersonnelinformation({ page: 0, size: 9999 });
    Personne.value = res.content.data;
  };
  Personnelinformation();

  // 确定
  const handleOk = async () => {
    emit('addCocMemder', form.value);
    modalVisible.value = false;
  };

  // 取消
  const handleCancel = () => {
    modalVisible.value = false;
  };

  watch(
    () => props.visible,
    () => {
      form.value = {
        userId: '',
        responsibility: '',
        description: '',
      };
    }
  );
</script>

<style scoped lang="less"></style>
